import React, { useState, useEffect, useContext } from 'react'
import { useSelector } from 'react-redux'
import dayjs from 'dayjs'
import { Table, Button } from 'antd'
import { getIndividualEnterpriseActivity } from '&/api/electricity'
import Container from '@/appComponents/Container'
import Filter from './Filter'
import downloadExcelImg from '&/commonjs/downloadExcelImg'
import { LayoutContext } from '&/pages/layouts/context'
import './index.scss'
const defaultColumns = [
  {
    title: '序号',
    width: 70,
    render: (_, __, index) => `${index + 1}`,
    align: 'center',
    fixed: 'left'
  },
  {
    title: '企业名称',
    width: 150,
    dataIndex: 'ent_name',
    key: 'ent_name',
    align: 'center',
    fixed: 'left'
  },
  {
    title: '所属区',
    width: 100,
    dataIndex: 'county_name',
    key: 'county_name',
    align: 'center',
    fixed: 'left'
  },
  {
    title: '所属街乡',
    width: 100,
    dataIndex: 'town_name',
    key: 'town_name',
    align: 'center',
    fixed: 'left'
  },
  {
    title: '所属行业',
    width: 100,
    dataIndex: 'industry_type',
    key: 'industry_type',
    align: 'center',
    fixed: 'left'
  },
  {
    title: '基准期用电量',
    width: 120,
    dataIndex: 'base_value',
    key: 'base_value',
    align: 'center',
    fixed: 'left'
  },
  {
    title: '总用电量',
    align: 'center',
    width: 100,
    dataIndex: 'total_sum',
    key: 'total_sum',
    align: 'center',
    fixed: 'left',
    sorter: (a, b) => a.total_sum - b.total_sum
  }
]
const ClueOverview = () => {
  const { activePlan } = useContext(LayoutContext)
  const [tableData, setTableData] = useState([])
  const [loading, setLoading] = useState()
  const [pageInfo, setPageInfo] = useState({})
  const [columns, setCollumns] = useState([])
  const [paramsData, setParamsData] = useState({
    county_id: -1,
    industry_id: -1,
    page: 1,
    page_size: 2000,
    time_type: 2,
    control_type: 1,
    is_change: 0
  })
  useEffect(() => {
    setParamsData((state) => {
      state.start_time = dayjs(activePlan.start_time).format(
        'YYYY-MM-DD HH:00:00'
      )
      state.end_time = dayjs(activePlan.end_time).format('YYYY-MM-DD HH:00:00')
      onQuery()
      return {
        ...state
      }
    })
  }, [activePlan.plan_id])

  const onQuery = async (v) => {
    setLoading(true)
    let json = handlerParams(paramsData)
    let res = await getIndividualEnterpriseActivity({
      ...json,
      plan_id: activePlan.plan_id
    })
    setLoading(false)
    if (res.data.length) {
      let filterKey = defaultColumns.map((i) => i.dataIndex)
      let type = paramsData.time_type
      let cloumn = Object.keys(res.data[0])
        .map((i) => {
          if (!filterKey.includes(i)) {
            return {
              title: type == 2 ? dayjs(i).format('YYYY-MM-DD') : i,
              width: 100,
              dataIndex: i,
              key: i,
              align: 'center'
            }
          }
        })
        .filter((v) => v)
      setCollumns(defaultColumns.concat(cloumn))
      setPageInfo(res.page_info)
      setTableData(res.data)
    } else {
      setTableData([])
    }
  }
  const handlerParams = (params) => {
    let newParams = {}
    for (let key in params) {
      if (params[key] !== -1) {
        newParams[key] = params[key]
      }
    }
    return newParams
  }
  const downloadExcel = () => {
    downloadExcelImg(tableData, columns, '单企活动')
  }
  return (
    <Container>
      <Container.ContainerQuery title="查询条件">
        <Filter
          handleQuery={onQuery}
          paramsData={paramsData}
          setParamsData={setParamsData}
          loading={loading}
        />
      </Container.ContainerQuery>
      <Container.ContainerContent>
        <div className="ClueOverview_title">
          <div className="tit">查询结果</div>
          <div className="sub">
            <Button
              type="primary"
              onClick={() => {
                downloadExcel()
              }}
            >
              导出
            </Button>
          </div>
        </div>
        <Table
          className="ClueOverview_table"
          bordered
          loading={loading}
          columns={[]}
          dataSource={[]}
          pagination={{
            ...pageInfo,
            defaultPageSize: 20,
            position: ['bottomCenter']
          }}
          size="small"
          scroll={{
            y: '65vh'
          }}
        />
      </Container.ContainerContent>
    </Container>
  )
}
export default ClueOverview
